<script setup>
import {reactive, onMounted} from 'vue';
import MovieItem from '@/components/Movie_item.vue'
import {
  AllMoviesService
} from '@/api/movie.js'

onMounted(() => {
  getMovieData()
})
const movieItem = reactive({
  activeCategory: "全部",
  activeCountry: "全部",
  activeReleaseDate: "全部",
  categoryArr: ['全部', '爱情', '动作', '射击', '悬疑'],
  countryArr: ['全部', '中国', '美国', '日本', '韩国'],
  releaseDataArr: ['全部', '一周前', '一个月前', '一年前'],
  gridData: [],
  currentPage: 1,
  pageSizes: [6, 12, 18, 24],
  pageSize: 12,
  total: 100
})

// 获取所有电影数据
const getMovieData = async () => {
  await AllMoviesService(movieItem.currentPage,movieItem.pageSize)
      .then((res) => {
        console.log(res)
        movieItem.gridData = res.data.data
        movieItem.total = res.data.count
        movieItem.pageSize = res.data.data.length
      })
      .catch((err) => {
        console.log(err)
      })
}
/*分页*/
const handleSizeChange = (val) => {
  console.log(`每页 ${val} 条`);
  movieItem.pageSize = val;
  getMovieData()
}
const handleCurrentChange = (val) => {
  console.log(`当前页: ${val}`);
  movieItem.currentPage = val;
  getMovieData()
}
</script>

<template>
  <div class="xjt-films-view">
    <div class="nav-container">
      <div class="category-nav" style="display: flex">
        <div class="nav-title" style="line-height: 60px;font-size: 20px;color: #ef4238;font-weight: bold;">
          类型：
        </div>
        <el-menu
            :default-active="activeCategory"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleCategoryNavSelect">
          <el-menu-item :index="item" v-for="(item,index) in movieItem.categoryArr" :key="index">{{
              item
            }}
          </el-menu-item>
        </el-menu>
      </div>

      <div class="country-nav" style="display: flex">
        <div class="nav-title" style="line-height: 60px;font-size: 20px;color: #ef4238;font-weight: bold;">
          区域：
        </div>
        <el-menu
            :default-active="activeCountry"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleCountryNavSelect">
          <el-menu-item :index="item" v-for="(item,index) in movieItem.countryArr" :key="index">{{
              item
            }}
          </el-menu-item>
        </el-menu>
      </div>

      <div class="release-date-nav" style="display: flex">
        <div class="nav-title" style="line-height: 60px;font-size: 20px;color: #ef4238;font-weight: bold;">
          年代：
        </div>
        <el-menu
            :default-active="activeReleaseDate"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleReleaseDateNavSelect">
          <el-menu-item :index="item" v-for="(item,index) in movieItem.releaseDataArr" :key="index">{{ item }}
          </el-menu-item>
        </el-menu>
      </div>
    </div>

    <div class="grid-content">
      <div class="grid-item" v-for="(item,index) in movieItem.gridData" :key="index">
        <MovieItem :movie="item"></MovieItem>
      </div>
    </div>
    <div class="my-pagination" style="margin-top: 30px;padding: 10px 0;border: 1px solid #ddd;">
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="movieItem.currentPage"
          :page-sizes="movieItem.pageSizes"
          :page-size="movieItem.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="movieItem.total">
      </el-pagination>
    </div>
  </div>
</template>

<style scoped>
.nav-container {
  margin-top: 20px;
  border: 1px solid #ddd;
  padding: 10px 20px;
}

.grid-content {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, 16.67%);
}

.grid-item {
  margin: 20px 20px 0 20px;
}

</style>